<template>
  <div >
    <ltext size="small" :model-value="modelValue" @click="focus" readonly />
    <el-dialog v-model="dialogVisible" draggable append-to-body fullscreen>
      <div>
        <el-tag>模板</el-tag>
        <lbtn  style="margin-left: 10px;" size="small" v-for="(temp, index) in temps" :key="index" @click="moban(temp)">{{ temp.name }}</lbtn >
      </div>
      <div class="flex" style="display: flex;">
        <div style="flex: 1;">
          <aceeditor ref="aceref" v-model="editorVal" :mode="mode" />
        </div>
        <div style="width: 100px;text-align: center;">
          <div class="mt20">
            <lbtn  type="primary" size="large" @click="save">确定</lbtn >
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tool from "@/utils/tool";
import Aceeditor from "@/lui/aceeditor.vue";
export default {
  name: 'CodeEditor',
  components: {Aceeditor},
  props: {
    modelValue: {
      type: String,
      default: ""
    },
    des: {
      type: String,
      default: ""
    },
    page: {
      type: String,
      default: ""
    },
    mode: {
      type: String,
      default: "javascript"
    },
    height: {
      type: [String,Number],
      default: 0,
    },
    options: {
      type: Object,
      default: () => {}
    },
    theme: {
      type: String,
      default: "idea"
    },
    readOnly: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      dialogVisible: false,
      temps: [],
      editorVal: ''
    }
  },
  emits: ['update:modelValue'],
  methods: {
    closeDialog () {
      this.dialogVisible = false
    },
    focus () {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.opened()
        this.$refs.aceref.setData(this.modelValue)
      })
    },
    opened () {
      tool.post('design/getBtnTemp').then(ret => {
        if(ret.stat) {
          this.temps = tool.str2obj(ret.data)
        }
      })
    },
    save () {
      this.$emit('update:modelValue', this.editorVal)
      this.dialogVisible = false
    },
    moban (temp) {
      if(temp.name === '搜索表单') {
        tool.post('design/getSearchRule', {page: this.page}).then(ret => {
          if(ret.stat) {
            this.$refs.aceref.setData(ret.data)
          }
        })
      }
      if(temp.name === '表格') {
        tool.post('design/getGridRule', {page: this.page}).then(ret => {
          if(ret.stat) {
            this.$refs.aceref.setData(ret.data)
          }
        })
      }
      else {
        if( temp.tpl) {
          let str = this.$refs.aceref.getData() + '\n' + temp.tpl
          this.$refs.aceref.setData(str)
        }
      }
    }
  }
}
</script>